<template>
  <BaseEcharts :options="options" />
</template>

<script lang="ts" setup>
import BaseEcharts from '@/components/BaseEcharts/BaseEcharts.vue'
import { computed, onMounted, reactive, toRefs } from 'vue'
import { GetHomePieInfoApi } from '@/request/home/homeApi'
import { ECOption } from '@/components/BaseEcharts/config'

const state = reactive({
  pieData: [],
})

const { pieData } = toRefs(state)

const options = computed<ECOption>(() => {
  return {
    baseOption: {
      timeline: {
        // y: 0,
        axisType: 'category',
        // realtime: false,
        // loop: false,
        autoPlay: true,
        // currentIndex: 2,
        playInterval: 1000,
        // controlStyle: {
        //     position: 'left'
        // },
        data: [
          '2002-01-01',
          '2003-01-01',
          '2004-01-01',
          {
            value: '2005-01-01',
            tooltip: {
              formatter: '{b} GDP达到一个高度',
            },
            symbol: 'diamond',
            symbolSize: 16,
          },
          '2006-01-01',
          '2007-01-01',
          '2008-01-01',
          '2009-01-01',
          '2010-01-01',
          {
            value: '2011-01-01',
            tooltip: {
              formatter: function (params: any) {
                return params.name + 'GDP达到又一个高度'
              },
            },
            symbol: 'diamond',
            symbolSize: 18,
          },
        ],
        label: {
          formatter: function (s: any) {
            return new Date(s).getFullYear()
          },
        },
      },
      title: {
        subtext: '数据来自国家统计局',
      },
      tooltip: {},
      legend: {
        data: ['第一产业', '第二产业', '第三产业', 'GDP', '金融', '房地产'],
        selected: {
          GDP: false,
          金融: false,
          房地产: false,
        },
      },
      calculable: true,
      grid: {
        top: 80,
        bottom: 100,
      },
      xAxis: [
        {
          type: 'category',
          axisLabel: { interval: 0 },
          data: [
            '北京',
            '\n天津',
            '河北',
            '\n山西',
            '内蒙古',
            '\n辽宁',
            '吉林',
            '\n黑龙江',
            '上海',
            '\n江苏',
            '浙江',
            '\n安徽',
            '福建',
            '\n江西',
            '山东',
            '\n河南',
            '湖北',
            '\n湖南',
            '广东',
            '\n广西',
            '海南',
            '\n重庆',
            '四川',
            '\n贵州',
            '云南',
            '\n西藏',
            '陕西',
            '\n甘肃',
            '青海',
            '\n宁夏',
            '新疆',
          ],
          splitLine: { show: false },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: 'GDP（亿元）',
          // max: 53500
          max: 30000,
        },
      ],
      series: [
        { name: 'GDP', type: 'bar' },
        { name: '金融', type: 'bar' },
        { name: '房地产', type: 'bar' },
        { name: '第一产业', type: 'bar' },
        { name: '第二产业', type: 'bar' },
        { name: '第三产业', type: 'bar' },
        {
          name: 'GDP占比',
          type: 'pie',
          center: ['75%', '35%'],
          radius: '28%',
        },
      ],
    },
    options: pieData.value,
  }
})

async function GetHomePieInfo() {
  const { data } = await GetHomePieInfoApi()
  console.log(data)
  pieData.value = data
}

onMounted(() => {
  GetHomePieInfo()
})
</script>

<style lang="less" scoped>
.pieChart {
  width: 100%;
  height: 100%;
}
</style>
